<script setup>
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import {ElMessage, ElNotification} from "element-plus";
import {useDark, useToggle} from "@vueuse/core/index";
import {loginByAccountApi} from "@/api/EmpApi";
import {getResponseData} from "@/util";
import router from "@/router";
import {useStore} from "vuex";

/* ==================== 通用数据 ==================== */

const vuex = useStore();

/* ==================== 管理员登录 ==================== */

// 登录面板标题
const loginBoardTitle = '《MyClub》后台管理子系统';
// 表单 + 表单数据 + 表单规则 todo: 上线后将默认值删除
let loginForm = shallowRef();
let loginFormData = shallowReactive({username: 'admin', password: 'admin'});
let loginFormRules = {'username': RULE.USERNAME, 'password': RULE.PASSWORD};

// 管理员登录: 验证表单 + 发送请求 + 解析响应
function login() {
  loginForm.value.validate(valid => {
    if (valid) {

      // 发送登录请求
       loginByAccountApi(loginFormData).then(res => {
         let data = getResponseData(res);
         // 登录成功: 更新登录状态 + 存储Token令牌，会员信息和权限列表 + 跳到主页面
         if (data) {
           ElMessage.success('登录成功！');
           vuex.dispatch('setLoginFlag', true);
           sessionStorage.setItem('token', data['token']);
           sessionStorage.setItem('loginPermissions', JSON.stringify(data['permissions']));
           sessionStorage.setItem('loginEmp', JSON.stringify(data['emp']));
           sessionStorage.setItem('deptName', JSON.stringify(data['deptName']));
           router.push('/Main');
         }
       });
    }
  });
}

/* ==================== 记住账号 ==================== */

let rememberMe = shallowRef(false);

/* ==================== 重置内容 ==================== */

// 重置内容
function reset() {
  loginForm.value.resetFields();
}

/* ==================== 忘记密码 ==================== */

// 忘记密码
function forget() {
  ElNotification.info('管理员账号: admin / admin');
}

/* ==================== onMounted ==================== */

// 暗黑模式
onMounted(() => useToggle(useDark()));
</script>

<template>
  <section class="login-body">
    <el-card class="login-card" :header="loginBoardTitle">
      <el-form class="login-form" ref="loginForm" status-icon
               :model="loginFormData"
               :rules="loginFormRules">
        <el-form-item prop="username" required>
          <el-input v-model="loginFormData['username']" suffix-icon="User" clearable
                    placeholder="输入账号 .."/>
        </el-form-item>
        <el-form-item prop="password" required>
          <el-input v-model="loginFormData['password']" suffix-icon="Lock" clearable
                    placeholder="输入密码 .." show-password/>
        </el-form-item>
        <el-button class="login-btn" type="primary" @click="login()">
          管理员登录
        </el-button>
        <el-checkbox class="remember-cbx" v-model="rememberMe" label="记住账号" size="small"/>
        <el-button class="forget-btn" link size="small" type="default" @click="forget()">
          忘记密码
        </el-button>
        <el-button class="reset-btn" link size="small" type="warning" @click="reset()">
          重置内容
        </el-button>
      </el-form>
    </el-card>
  </section>
</template>

<style scoped lang="scss">

.login-body {
  height: 100vh; // 高度
  background: url("../assets/image/loginBackground.png") no-repeat; // 背景图片（不平铺）
  background-size: 100% 100%; // 上下 左右
  padding-top: 200px; // 上内边距
  box-sizing: border-box; // 忽略内边距影响

  .login-card {
    margin: auto; // 自居中
    width: 50vh; // 宽度
    opacity: 0.95; // 透明度
  }

  .login-btn {
    width: 100%; // 宽度
    margin: 0 auto 10px; // 外边距
    letter-spacing: 2px; // 字母间距
  }

  .forget-btn, .reset-btn {
    float: right; // 右浮动
    line-height: 18px; // 行高
  }
}
</style>